<template>
  <view>
    <view class="introduction">
      <text>平台保证金为1888，可随时退还！</text>
      <text>将按支付通道原路返还至您的账户</text>
    </view>
    <view class="contact">
      <view class="contact_top">充值方式</view>
      <view class="contact_key" @click="checkmdex(0)">
        <view class="fl">
          <image src="../../static/iocn32.png"></image>
          <text>微信支付</text>
        </view>
        <view class="fr" v-if="wxshows"
          ><image src="../../static/iocn26.png"></image
        ></view>
        <view class="fr" v-if="wxshowss"
          ><image src="../../static/iocn25.png"></image
        ></view>
      </view>
      <view class="contact_key" @click="checkmdex(1)">
        <view class="fl">
          <image src="@/static/yue.svg"></image>
          <text>余额支付</text>
        </view>
        <view class="fr" v-if="yeshows"
          ><image src="../../static/iocn26.png"></image
        ></view>
        <view class="fr" v-if="yeshowss"
          ><image src="../../static/iocn25.png"></image
        ></view>
      </view>

      <view class="contact_box">
        <text>充值金额</text>
        <view>
          <image src="../../static/iocn34.png"></image>
          <input type="text" v-model="totalFee" placeholder="00.00" />
        </view>
      </view>
    </view>
    <view class="footer" @click="postCreateTrade()">确认支付</view>
  </view>
</template>

<script>
import {
  CreateTrade,
  MiniProgramPay,
  PushNotify,
} from "@/public/Api/update.js";
import { setValue, getValue } from "@/public/storeage/index.js";
import icon from "../../uni_modules/uview-ui/libs/config/props/icon";
export default {
  data() {
    return {
      totalFee: "",
      canInvoiced: false,
      index: 0,
      wxshows: true,
      wxshowss: false,
      yeshows: true,
      yeshowss: false,
    };
  },
  methods: {
    checkmdex(e) {
      this.index = e;
      if (this.index === 0) {
        this.wxshows = false;
        this.wxshowss = true;
        this.yeshows = true;
        this.yeshowss = false;
      } else if (this.index === 1) {
        this.yeshows = false;
        this.yeshowss = true;
        this.wxshows = true;
        this.wxshowss = false;
      }
    },
    postCreateTrade() {
      this.CreateTrade();
    },
    // 创建交易订单
    async CreateTrade() {
      var payerUserId = getValue("id");
      var amount = this.totalFee;
      var canInvoiced = this.canInvoiced;
      if (this.index == 0) {
        var payType = 2;
        var payDestination = 4;
      }
      if (this.index == 1) {
        var payType = 3;
        var payDestination = 4;
      }
      if (amount == "") {
        uni.showToast({
          title: "充值金额不能为空",
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      try {
        const { data: res } = await CreateTrade({
          payerUserId,
          amount,
          payDestination,
          canInvoiced,
          payType,
        });
        if (this.index == 0) {
          this.MiniProgramPay(res.result.data.tradeNumber);
        }
        if (this.index == 1) {
          this.yeCreateTrade(res.result.data.tradeNumber);
        }
      } catch (e) {}
    },
    async MiniProgramPay(res) {
      var outTradeNo = res;
      var body = "交保证金";
      var totalFee = JSON.parse(this.totalFee * 100);
      var spBillCreateIp = "127.0.0.1";
      var notifyUrl =
        "https://pay.syh56.com:44352/api/WeChatPayNotify/Unifiedorder";
      var tradeType = "JSAPI";
      var openId = getValue("wxOpenId");
      uni.request({
        url: "https://pay.syh56.com:44352/api/WeChatPay/MiniProgramPay",
        method: "post",
        header: {
          "Abp.TenantId": "1",
          "Content-Type": "application/json",
        },
        data: {
          outTradeNo,
          body,
          totalFee,
          spBillCreateIp,
          notifyUrl,
          tradeType,
          openId,
        },
        success: (res) => {
          var parameter = JSON.parse(res.data.parameter);
          this.doWxPay(parameter);
        },
      });
    },

    doWxPay(parameter) {
      var param = parameter;
      //小程序发起微信支付
      uni.requestPayment({
        nonceStr: param.nonceStr,
        timeStamp: param.timeStamp, //记住，这边的timeStamp一定要是字符串类型的，不然会报错
        // out_trade_no: param.out_trade_no,
        appId: param.appId,
        package: param.package,
        signType: param.signType,
        paySign: param.paySign,
        success: function (event) {
          uni.showToast({
            title: "支付成功",
            icon: "success",
            duration: 2000,
          });
          setTimeout(function () {
            uni.redirectTo({
              url: "/pages/PersonalCenter/sjindex",
            });
          }, 2000);
        },
        fail: function (error) {
          // let id = 1
          uni.showToast({
            title: "支付失败",
            icon: "error",
            duration: 2000,
          });
        },
        complete: function () {
          console.log("pay complete");
        },
      });
    },

    //余额支付
    async yeCreateTrade(res) {
      var totalAmount = this.totalFee;
      var tradeNo = "";
      var outTradeNo = res;
      console.log(res);
      var memo = "交保证金";
      try {
        const { data: res } = await PushNotify({
          totalAmount,
          tradeNo,
          outTradeNo,
          memo,
        });

        if (res.result.success == false) {
          uni.showToast({
            title: `${res.result.message}`,
            icon: "error",
            duration: 2000,
          });
          return false;
        } else {
          uni.showToast({
            title: `充值成功`,
            icon: "success",
            duration: 2000,
          });
          setTimeout(function () {
            uni.redirectTo({
              url: "/pages/PersonalCenter/sjindex",
            });
          }, 2000);
        }
      } catch (e) {}
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
  padding: 20upx 15upx;
}
.introduction {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin: 25upx auto;
  background-color: rgba(240, 77, 62, 0.1);
  width: 600upx;
}
.contact {
  width: 100%;
  opacity: 1;
  border-radius: 17.52upx;
  background: #ffffff;
  box-shadow: 1.75upx 1.75upx 7.01upx 0px #cccccc,
    1.75upx 1.75upx 7.01upx 0px #cccccc;
  margin: 0 auto;

  .contact_top {
    padding: 40upx;
    font-size: 35upx;
    font-weight: bold;
  }

  .contact_key {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 30upx;
    height: 90upx;
    border-bottom: 1upx solid #e5e5e5;

    .fl {
      display: flex;
      align-items: center;

      image {
        width: 40upx;
        height: 40upx;
      }

      text {
        font-size: 31upx;
        padding-left: 12upx;
        font-weight: bold;
      }
    }

    .fr {
      image {
        width: 28upx;
        height: 28upx;
      }
    }
  }

  .contact_box {
    padding: 40upx;

    text {
      display: block;
      font-size: 35upx;
      font-weight: bold;
    }

    view {
      display: flex;
      align-items: center;
      padding-top: 40upx;

      image {
        width: 40upx;
        height: 40upx;
      }

      input {
        font-size: 38upx;
        font-weight: bold;
        padding-left: 10upx;
      }
    }
  }
}

.footer {
  width: 648upx;
  height: 72upx;
  text-align: center;
  line-height: 72upx;
  border-radius: 20upx;
  margin: 0 auto;
  margin-top: 30upx;
  color: #fff;
  background-color: #ef4d3d;
  font-size: 32upx;
  font-weight: bold;
}
</style>
